<template>
  <div style="width: 70%">
    <div style="margin-bottom: 30px">编辑历史</div>
    <el-form :inline="true" :model="form"   >
      <el-form-item label="标题" prop="name" >
        <el-input v-model="form.name" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item label="正文"  prop="body"  >
        <el-input     style="width: 1000px" type="textarea"  autosize  v-model="form.body" placeholder="请输入正文"></el-input>
      </el-form-item>
      <el-form-item label="图片" prop="img">
        <el-upload
            class="avatar-uploader"
            :action="'http://localhost:9090/api/file/upload?token=' + this.admin.token"
            :show-file-list="false"
            :on-success="handleCoverSuccess"
            :on-change="onChange"
        >
          <img v-if="form.img" :src="form.img " class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <div style="text-align: center  ;margin-top:5px ">
      <el-button type="primary" @click="update" size="medium">提交</el-button>
      <el-button type="info" @click="$router.push('/HistoryBackground')" size="medium">返回</el-button>
    </div>
  </div>
</template>

<script>
    import request from "@/util/request";
    import Cookies from "js-cookie";
    export default {

        name: "EditHistory",
        data(){
            return{
              admin: Cookies.get('admin') ? JSON.parse(Cookies.get('admin')) : {},
              form:{
                img:''
              },
            }
        },
        created() {
          const id=this.$route.query.id
          request.get('/history/'+id).then(res=>{
            this.form=res.data;
            console.log(this.form)
          })
        },
        methods:{
          onChange (file) {
            if(file){
              const suffix = file.name.split('.')[1]
              const size = file.size / 1024 / 1024 < 2
              if(['png','jpeg','jpg'].indexOf(suffix) < 0){
                this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
                this.$refs.upload.clearFiles()
                return false
              }
              if(!size){
                this.$message.error('上传文件大小不能超过 2MB!')
                return false
              }
              return file
            }
          },
          handleCoverSuccess(res) {
            if (res.code === '200') {
              console.log(res.data)
              // this.$set(this.form, 'cover', res.data)
              this.form.img = res.data
            }
          },
            update(){
                request.put("/history/update",this.form).then(res=>{
                    if (res.code=="200"){
                        this.$notify.success("修改成功")
                        this.$router.push("/HistoryBackground")
                    }else{
                        this.$notify.error(res.msg)
                    }
                })
            }
        }
    }
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
